<template>
  <div class="star-div__base">
    <div
      class="star-div__item on"
      :class="size"
      v-for="star in starConfig.on"
      :key="star + 'on'"
    ></div>
    <div
      class="star-div__item half"
      :class="size"
      v-for="star in starConfig.half"
      :key="star + 'half'"
    ></div>
    <div
      class="star-div__item off"
      :class="size"
      v-for="star in starConfig.off"
      :key="star + 'off'"
    ></div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "@vue/composition-api";
// 星星数量接口
interface StarAmount {
  on: number;
  off: number;
  half: number;
}
// 星星尺寸
type StarSize = "tiny" | "small" | "medium" | "large";
// 计算星星
function calStar(score: number): StarAmount {
  const integer: number = Math.floor(score);
  const minus: number = score - integer;
  const hasHalf: boolean = minus >= 0.5;
  //   console.log(integer, minus, hasHalf);
  return hasHalf
    ? {
        on: integer,
        half: 1,
        off: 5 - integer - 1,
      }
    : {
        on: integer,
        half: 0,
        off: 5 - integer,
      };
}
export default defineComponent({
  // 通信数据
  props: {
    score: {
      validator(score: unknown) {
        if (typeof score === "number" && score <= 5 && score >= 0) {
          return true;
        } else {
          return false;
        }
      },
      default() {
        return 5;
      },
      type: Number as PropType<number>,
    },
    size: {
      validator(size: unknown) {
        const sizeList = ["tiny", "small", "medium", "large"];
        if (
          typeof size === "string" &&
          sizeList.indexOf(size.toLowerCase()) !== -1
        ) {
          return true;
        } else {
          return false;
        }
      },
      default() {
        return "small";
      },
      type: String as PropType<StarSize>,
    },
    customizeStyle: {
      type: String,
    },
  },
  // 可以考虑重构
  setup(props: any) {
    const score = props.score;
    let starConfig: StarAmount | null = null; // 星星配置参数
    if (typeof score === "number") {
      starConfig = calStar(score); // 计算星星个数
    }
    // 判断是否需要添加
    return {
      starConfig,
    };
  },
});
</script>
<style lang="stylus">
@import '../../common/style/mixin.styl';

.star-div__base {
  display: inline-block;
  box-sizing: border-box;
  overflow: hidden;
  vertical-align: middle;

  .star-div__item {
    box-sizing: border-box;
    display: inline-block;

    &.tiny {
      height: 18px;
      width: 18px;
      margin: 0 4px;
    }

    &.small {
      height: 24px;
      width: 24px;
      margin: 0 12px;
    }

    &.medium {
      height: 36px;
      width: 36px;
      margin: 0 16px;
    }

    &.large {
      height: 48px;
      width: 48px;
      margin: 0 20px;
    }

    &.on.tiny {
      query-bg('star24_on');
    }

    &.off.tiny {
      query-bg('star24_off');
    }

    &.on.small {
      query-bg('star24_on');
    }

    &.off.small {
      query-bg('star24_off');
    }

    &.half.small {
      query-bg('star24_half');
    }

    &.on.medium {
      query-bg('star36_on');
    }

    &.off.medium {
      query-bg('star36_off');
    }

    &.half.medium {
      query-bg('star36_half');
    }

    &.on.large {
      query-bg('star36_on');
    }

    &.off.large {
      query-bg('star48_off');
    }

    &.half.large {
      query-bg('star48_half');
    }
  }
}
</style>
